<template>
	<view class="main">
		<view class="mainHeader" id="mainHeader">
			<view @click="onClick(index)" v-for="(item,index) in options"
				:class="[selectIndex === index ?'activeTab':'','mianItem']" :key="index">
				{{ item.name  }}
				<icon type="download" size="14" v-if="item.value === 2 && sortPrice === 0" class="iconItem"
					color="#a09b9b"></icon>
			</view>
		</view>

		<scroll-view :style="{height: scrollHeight +'px' }" scroll-y="true" refresher-enabled="true"
			style="margin-top: 100rpx;" :refresher-triggered="triggered" :refresher-threshold="100"
			refresher-background="lightgreen" @refresherrefresh="onRefresh" @refresherpulling="onPulling"
			@scrolltolower="onScrolltolower">
			<view v-for="item in rowsData" :key="item.productId">
				<card :name="item.productName" :productId="item.productId" @onProductClick="productClick"
					:price="item.productPrice" :sell-count="item.productSales" @onToChart="onToChart"
					:image="item.productImage">
				</card>
			</view>
			<view class="nomore" v-if="!canLoad">没有更多数据</view>
		</scroll-view>
		<!-- 规格 -->
		<spacForm :isPopup="isPopup" :productModel="productModel" @close="closePopup"></spacForm>
	</view>
</template>
<script>
	import spacForm from '@/components/spacForm/spacForm.vue'
	export default {
		data() {
			return {
				selectIndex: 0,
				options: [{
						name: '销量',
						value: 0,
						sortType: 'sales'
					},
					{
						name: '现货',
						value: 1,
						sortType: 'stock'
					},
					{
						name: '价格',
						value: 2,
						sortType: 'price'
					},
					{
						name: '上新',
						value: 3,
						sortType: 'news'
					},
				],
				triggered: false,
				headerHeight: 0,
				scrollHeight: 0,
				phoneHeight: 0,
				sortType: 'news',
				rowsData: [],
				pageIndex: 1,
				canLoad: true,
				sortPrice: 1,
				isPopup: false,
				productModel: {},
				appid: ''

			}
		},
		components: {
			spacForm
		},
		created() {


		},
		onLoad(e) {

			const $this = this
			$this.appid = e.appId
			uni.getSystemInfo({
				success(res) {
					$this.phoneHeight = res.windowHeight;
				}
			});
			this.selectIndex = Number(e.type)
			const item = this.options.find(f => f.value === $this.selectIndex)
			if (item)
				this.sortType = item.sortType
		},
		mounted() {
			const $this = this
			$this.$nextTick(() => {
				const header = uni.createSelectorQuery()
					.in(this)
					.select("#mainHeader")
				header.boundingClientRect(data => {
					if (data) {
						let h = data.height;
						$this.scrollHeight = $this.phoneHeight - h
					}
				
				}).exec();
				$this.loadData()
			})
		},
		methods: {
			productClick(e) {

				uni.redirectTo({
					url: '/pages/product/detail/detail?productId=' + e + '&appId=' + this.appid
				})
			},
			onToChart(e) {
				const $this = this
				uni.showLoading({
					title: 'loading'
				})
				$this._get(
					'product/product/detail', {
						productId: e,
						url: ''
					},
					function(res) {
						uni.hideLoading()
						const {
							data,
							code
						} = res
						if (code === 1) {
							$this.productModel = data
							$this.isPopup = true
						}
					})

			},
			closePopup(e) {
				this.isPopup = false
			},
			onClick(index) {
				this.selectIndex = index
				const item = this.options.find(f => f.value === index)
				if (item) {
					this.sortType = item.sortType
					this.rowsData = []
					this.canLoad = true
					this.pageIndex = 1
					if (item.value === 2) {
						this.sortPrice = (this.sortPrice === 1) ? 0 : 1
						this.loadData()
					} else {
						this.loadData()
					}
				}
			},
			loadData() {
				if (!this.canLoad)
					return
				const $this = this
				uni.showLoading({
					title: '加载中...'
				})
				$this._postBody(
					"product/product/lists", {
						pageIndex: $this.pageIndex,
						categoryId: '',
						search: "",
						sortType: "",
						sortPrice: $this.sortPrice,
						pageSize: 10,
						sortType: $this.sortType
					},
					function(res) {
						uni.hideLoading();
						$this.triggered = false
						const {
							data,
							code,

						} = res
						if (code === 1) {
							const {
								records,
								lastPage,
								pageIndex
							} = data
							if (pageIndex >= lastPage) {
								$this.canLoad = false
								return
							}
							$this.rowsData.push(...records)
						}
					}
				);
			},
			onRefresh() {
				this.triggered = true
				this.canLoad = true
				this.pageIndex = 1
				this.rowsData = []
				this.loadData()

			},
			onPulling(e) {

			},
			onRestore() {},
			onAbort() {

			},
			onScrolltolower() {
				this.pageIndex += 1
				this.loadData()
			}
		},

	}
</script>
<style lang="scss">
	.main {

		overflow-x: hidden;
		width: 100%;
	}

	.activeTab {
		border-bottom: 2px solid #1aad58;
		color: #1aad58;
	}

	.main .mainConent {
		margin-top: 100rpx;

	}

	.iconItem {
		position: relative;
		left: 0rpx;
		top: 5rpx
	}

	.main .mainHeader {
		height: 80rpx;
		width: 100%;
		display: flex;
		background: #fff;
		flex-direction: row;
		justify-content: space-around;
		line-height: 80rpx;
		position: fixed;
		z-index: 10;
	}

	.mian .mainHeader .mianItem {
		background: yellow;
		flex: 1;

	}

	.nomore {
		text-align: center;
		padding: 20rpx;
		margin: 10rpx;
		color: #8d8787ef;
	}
</style>